<template>
  <h2 class="Album-title">最新专辑</h2>
  <div class="Album">
    <div class="Album-item">
      <div
        class="Album-img"
        v-for="item in newestList"
        :key="item.id"
        :data-songid="item.id"
        @click="herfAlbumDetail(item.id)"
      >
        <img class="Album-image" :src="item.blurPicUrl" alt="" />
        <div class="Album-bg"></div>
        <div class="Album-text-item">
          <p class="Album-name">{{ item.name }}</p>
          <p class="Album-text">{{ item.artist.name }}</p>
          <p class="Album-text">
            发行时间：{{ dayjs(item.publishTime).format("YYYY-MM-DD") }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
export default defineComponent({
  name: "Album",
});
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getNewest } from "../../api/Album/Album";
const newestList = ref([]);
onMounted(async () => {
  const result = await getNewest({});
  newestList.value = result.data.albums;
});
const router = useRouter();
const herfAlbumDetail = (e) => {
  // 想跳哪跳哪  e是id
  // router.push({
  //   path:''
  // });
};
</script>

<style scoped>
.Album {
  width: 1230px;
  margin: 0 auto;
  padding: 0px !important;
}
.Album-title {
  font-weight: 400;
  font-size: 28px;
  width: 1200px;
  margin: 60px auto 30px;
}
.Album-item {
  display: flex;
  flex-wrap: wrap;
  margin-right: 50px;
}
.Album-img {
  width: 210px;
  height: 282px;
  margin: 0 30px 50px 0;
  position: relative;
}
.Album-image {
  width: 192px;
  height: 192px;
  position: absolute;
  z-index: 99;
}
.Album-bg {
  width: 180px;
  height: 180px;
  position: absolute;
  top: 6px;
  right: -12px;
  background-image: url(https://static1-music.taihe.com/client/img/f412d65.png);
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  transition: right 0.5s;
}
.Album-img:hover .Album-bg {
  right: -24px;
  transition: right 0.5s;
}
.Album-text-item {
  position: absolute;
  bottom: 0px;
}
.Album-name {
  font-size: 16px;
}
.Album-text {
  font-size: 14px;
  color: #909399;
  margin: 6px 0 0 0;
}
.Album {
  display: flex;
  flex-wrap: wrap;
  padding-left: 50px;
}
.Album-item {
  margin-right: 30px;
}
</style>
